출처 : PHPSCHOOL 

2개 이상의 영역에 대해서 드래그앤 드랍시 오류 수정, 리사이즈, 펼침 기능 추가 등 변화가 좀 많다면 많을 수도 있습니다. ^^;;

 아래는 전체 내용에 대한 간략한 소개 입니다. 소스 및 예제는 링크된 페이지에서 확인 하실 수 있습니다.
 

 /**
 * xwzGadgetry : Javascript UI Library for the gadget(or the widget) <http://www.x-wiz.com/>
 * 레이어의 위치 지정 또는 순서 출력을 사용자가 원하는 위치 또는 순서로 배열하도록 하는 함수.
 * 쇼핑몰에서 상품 위치나, 디자인관리에서 디자인 레이어 위치 이동에 따른 배열,
 * 여러 통계 수치나, 입력폼과 출력폼이 동일한 화면에서 출력 순서 변경을 위해 만듦
 *
 * Idea of "drag&drop swap" is from "google ig<http://www.google.co.kr/ig/>" - see dragDepart()
 * Idea of "toggle swap" is from "yahoo.com<http://kr.yahoo.com/>"- see prevToggle()
 * Idea of "the distance" is from "daum.net<http://www.daum.net/>" - see _swapAviate()
 * Idea of "bindAsObject, bindAsEvent" is from "Prototype JavaScript Framework <http://www.prototypejs.org/>"
 *
 *@copyright    x-wiz.com
 *@license        The LGPL License
 *@author        N.Thu Lee
 *@version      1.0 Alpha
 *@release      2006.11.07
 *@updated    2007.05.28
 *@changelog
 *2006.11.22
 *- 레이아웃 이동 간격 수식 변경(다음.넷 참조)
 *
 *2006.12.04
 *- 드래그앤드랍 기능 추가
 *
 *2007.05.02
 *- xwzGadgetry로 라이브러리 명칭 확정
 *- 이벤트 핸들러 추가 및 해제 함수를 라이브러리 외부 함수로 분리
 *- 2개 이상의 라이브러리 대상 객체에 대해서 드래그앤드랍시 레이어 위치 문제 수정
 *- bindAsObject, bindAsEvent 외부 함수 추가
 *
 *2007.05.05
 *- expand 기능 추가. 가젯의 document 영역에 대한 최소화, 최대화 기능 추가
 *
 *2007.05.28
 *-resize 기능 추가
 *
 *+-------------------------------------+
 *plan
 *+-------------------------------------+
 * - 레이어의 각 셀영역이 고정 그리드인 것을 틀에 제한없이 사용 가능하도록 추가
 * - 2개 이상의 영역에 가젯이 이동가능하도록 추가
 * - 각 특성별 분리 작업 -모듈화(?). drag & drop, toggle swapping, resize, ...
 * - 여전히 알고리즘이나 소스에 대한 최적화 필요 쩝....
 *
 *@example
 *-( new xwzGadgetry(프레임 객체 ID, [[Toggle Tag Name],[Columns : 가로 갯수],[Margin : 간격]]) ).load();
 *
 *+-------------------------------------+
 *method
 *+-------------------------------------+
 *-loadSequel() : 가젯 위치값을 쿠키 정보에서 가져오는 함수
 *-saveSequel() : 가제 위치를 쿠키로 저장한 후 onArrival 함수를 호출
 *-onArrival(function object) : 가젯 위치 변경되어 완료되었을 때 호출하는 사용자용 함수
 *-getIndex(object[or int, string])    : 고유 인덱스를 통해서 해당 가젯의 배열에서 위치를 찾는 함수
 *-searchGadget(object[or int, string]) : 인덱스 또는 객체값, ID, Name을 통해서 가젯 인스턴스를 찾음
 *-columns(int, bool)    : 가젯의 가로 갯수 설정 또는 그 값 반환 함수 (Bool:값 설정 시 가젯이 위치를 찾아갈 때 효과 없이 이동할 것인지 여부)
 *-strata(int) : 가젯이 해당 위치를 찾아 갈 때, _swapAviate 함수를 몇번 호출할 것인지 설정 또는 반환(가젯 위치 이동 속도에 관여함)
 *-opacity(int) : 가젯이 이동할 때 투명도 설정 및 값 반환 함수(0~100)
 *-motion(Bool) : 가젯 이동 시 이동 효과 없이 바로 적용할 지 설정/반환 함수
 *-reset(Bool) : 가젯 위치 초기화 전역 함수
 *-compose() : 각 가젯 배열 인덱스에 따른 위치를 초기화 하는 함수
 *dragDepart(event object, target int) : 마우스다운 이벤트가 발생하였을 때 drag&drop 이벤트 발생
 *-resetToggle(object, bool) : 위치 초기화 (Object:이벤트 발생 객체, Bool:모션 효과 여부)
 *-prevToggle(object 이벤트 발생 객체,int[or object, string]) : 클릭 이벤트 발생 대상 가젯이 이전 순서로 이동하는 버튼(이미지) 설정
 *-nextToggle(source object, target int[or object string])    : 클릭 이벤트 발생 시 대상 가젯이 다음 순서로 이동
 *-firstToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 처음 순서로 이동
 *-lastToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 마지막 순서로 이동
 *-upToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 위로 이동
 *-downToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 아래로 이동
 *-leftToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 왼쪽으로 이동
 *-rightToggle(source object, target int[or object string])    : 클릭 이벤트 발생 시 대상 가젯이 오른쪽으로 이동
 *-expose(target int[or object string]) : 가젯 expand 명령 수행
 *-expandAttrib(target int[or object], name string, value string [or function,string], function bind object) : expand 옵션 변경 함수.
 *  name [strata,min,max,animate], 함수 호출 bind object 생략 가능
 *
 *+-------------------------------------+
 * memberof variable
 *+-------------------------------------+
 *-AvailableCookie : 쿠키 유지일
 *-noResize : 리사이즈 변경 가능 여부 확인
 *-borderColor : 영역 clone 객체 테두리 색상
 *-grip : 리사이즈 grip 객체 속성 설정(color:색상,size:크기,minWidth:너비최소제한,minHeight:높이최소제한,maxWidth:너비최대제한,maxHeight:높이최대제한)
 *          grip={color:'red',size:8,minWidth:null,minHeight:null,maxWidth:null,maxHeight:null};
 *
 *3.Toggle List (Toggle TagName으로 지정된 Tag로 감싸 주어야 함.<span toggle="명령 옵션 지정"
 *-reset:초기화
 *-up, down, left, right:위, 아래, 왼쪽, 오른쪽으로 이동
 *-first, last:처음, 끝으로 이동
 *-next, prev:다음, 이전 순서로 이동
 *-drag: 드래그 앤 드랍 영역
 *-expand: document 영역에 대한
 *-gadget: expand, resize 영역
 *
 *+-------------------------------------+
 *expand option (<span toggle="expand" attr:옵션="값" ...>
 *+-------------------------------------+
 *- gadget toggle이 반드시 존재하여야 함.
 *-'attr:strata' : Int 속도
 *-'attr:state' : [max, min] 상태값
 *-'attr:min' : 최소화되었을 때 실행할 함수 또는 JS code
 *-'attr:max' : 최대화되었을 때 실행할 함수 또는 JS code
 *-'attr:animate'  : [Blind, Slide, [None or null]] : 각 상태값 변경 시 효과
 *
 *+-------------------------------------+
 *onArrival return value
 *+-------------------------------------+
 *-index: 순서 값
 *-top: style.top
 *-left: style.left
 *-width: style.width
 *-height: style.height
 *-expanded: expand 속성[Bool]
 */

출처 : http://cafe.naver.com/pspboolp.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=293